<template>
    <div class="login flex justify-between">
        <div class="flex-3 flex align-center">
            <div class="mar-l-300">
                <div class="flex">
                    <img :src="logoUrl" class="w-px-40 h-auto" />
                    <h1 class="color-main mar-l-10">{{ systemTitle }}</h1>
                </div>

                <div class="mar-t-10 mar-l-5">
                    <h2 style="letter-spacing: 3px">Welcome</h2>
                    <Lines w="45px" :h="4" :bg="mainBgColor" round animated animateClass="rubberBand" />
                </div>
            </div>
        </div>

        <div class="flex flex-1 justify-center align-center mar-r-40">
            <div class="w-100">
                <h1 class="font-bold-normal">登录</h1>

                <div class="mar-t-40">
                    <el-input v-model="userName" prefix-icon="el-icon-user" placeholder="请输入用户名" size="normal" clearable></el-input>
                    <Lines :h="1" bg="#f5f5f5" />
                </div>

                <div class="mar-t-20">
                    <el-input v-model="password" type="password" prefix-icon="el-icon-key" placeholder="请输入密码" size="normal" clearable></el-input>
                    <Lines :h="1" bg="#f5f5f5" />
                </div>

                <div class="mar-t-20">
                    <div class="flex justify-between align-center">
                        <el-input v-model="code" prefix-icon="el-icon-check" placeholder="请输入验证码" size="normal" clearable style="width: 240px;" @keyup.enter.native="login"></el-input>

                        <div class="cur-pointer" @click="getCaptcha()">
                            <img :src="codeUrl" class="w-px-90 h-auto" />
                        </div>
                    </div>

                    <Lines :h="1" bg="#f5f5f5" />
                </div>

                <div class="mar-t-20">
                    <el-button type="primary" round @click="login">登录</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Lines from "@/components/Lines"
    import SvgIcons from "@/components/SvgIcons"
    import variables from "@/assets/style/variable.module.scss"
    import Utils from "@/utils/utils"

    import { mapState } from "vuex"
    import { getCaptcha } from '@/apis/login'

    export default {
        name: "Login",

        components: {
            Lines,
            SvgIcons,
        },

        computed: {
            ...mapState({
                systemTitle: state => state.settings.systemTitle,
                logoUrl: state => state.settings.logoUrl,
                isLogin: state => state.user.isLogin
            }),
        },

        data() {
            return {
                // 主题背景色
                mainBgColor: variables.mainBgColor,

                // 用户名
                userName: "admin",

                // 密码
                password: "admin123",

                // 验证码
                code: "",
                codeUrl: "",
                uuid: ''
            }
        },

        created() {
            if (this.isLogin) {
                Utils.notifyPopUpMsg("warning", "您已登录，请勿重复登录！", "警告", 2000)
                this.$router.push("/")
                return
            }

            this.getCaptcha()
        },

        methods: {
            // 获取登录验证码
            async getCaptcha() {
                let data = await getCaptcha()

                if (data.code === 200) {
                    this.codeUrl = "data:image/gif;base64," + data.img
                    this.uuid = data.uuid
                }
            },

            // 登录
            async login() {
                if (this.userName === "") {
                    Utils.notifyPopUpMsg("warning", "用户名不得为空！", "警告", 2000)
                    return
                }

                if (this.password === "") {
                    Utils.notifyPopUpMsg("warning", "密码不得为空！", "警告", 2000)
                    return
                }

                if (this.code === "") {
                    Utils.notifyPopUpMsg("warning", "验证码不得为空！", "警告", 2000)
                    return
                }

                let params = {
                    username: this.userName,
                    password: this.password,
                    uuid: this.uuid,
                    code: this.code
                }

                let data = await this.$store.dispatch('user/login', params).catch(err => {
                    // console.log('登录失败，刷新验证码!')
                    this.getCaptcha()
                })

                // 登录成功，跳转到首页
                if (data) {
                    Utils.notifyPopUpMsg("success", "登录成功！", "登录成功", 1000)

                    setTimeout(() => {
                        this.$router.push("/")
                    }, 1000)
                }
            },
        },
    }
</script>

<style scoped>
    .login {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: url("../assets/images/login_bg.jpg") no-repeat;
        background-size: 100%;
    }

    /deep/ .el-input__inner {
        border: none;
    }
</style>
